<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title>用户列表</title>

    <!--Begin  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">
    <style>
        .main-content {
            background-color: white;
        }
        tr td a {
            margin-right: 10px;
        }

        .container .table thead tr th {
            line-height: 60px;
            text-align: center;
        }

        .container .table tbody tr td {
            line-height: 60px;
        }


        a:hover{
            cursor: pointer;
        }



        .main-content {
            background-color: rgb(236, 236, 237);

        }

        .wrapper {
            background-color: white;
        }

        tr td a {
            margin-right: 10px;
        }

        .container-fluid > .table > thead > tr > th {
            line-height: 40px;
            text-align: center;
        }

        .container-fluid > .table > tbody > tr > td {
            height: 80px;
            vertical-align: middle;
        }

        .container-fluid > .table > tbody > tr > td > i:hover {
            cursor: pointer;
        }

        .container-fluid {
            vertical-align: center;
        }



        .ae-body > div {
            margin: 3% 0;
        }

        .ae-body > div > label {
            text-indent: 0;
            width: 20%;
            margin-right: 5%;
        }

        .ae-body > div > label > span {
            float: right;
        }

        .selectC{
            display: inline-block;
            border-top-left-radius: .3rem;
            padding: .67rem 1.5rem;
            font-size: 1.25rem;
            margin-left: -1px;
            line-height: 1.25;
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-bottom-left-radius: .3rem
        }

        .selectC:focus{
            outline: 0;
            box-shadow: 0 0 0 .0rem rgba(0, 123, 255, .25)
        }

        .toPage{
            display: inline-block;
            /*border-top-left-radius: .3rem;*/
            /*padding: .85rem 1.5rem;*/
            font-size: 1.25rem;
            height: 34px;
            margin-left: -1px;
            line-height: 1.25;
            /*background-color: #fff;*/
            border: 1px solid #dee2e6;
            text-align: center;
            /*border-bottom-left-radius: .3rem;*/
            width: 34px;
        }

        .toPage[type=text]:focus{
            outline: 0;
            box-shadow: 0 0 0 .0rem rgba(0, 123, 255, .25)
        }

        .wrapper div {
            background-color: white;
        }

        .wrapper {
            background-color: #eee;
        }
    </style>
</head>
<body class="sticky-header">
<jsp:include page="../inc/left.jsp"/>
<div class="main-content">
    <jsp:include page="../inc/header.jsp"/>
    <div class="wrapper">
        <%--    <jsp:include page="../inc/header.jsp"/>--%>
        <div class="page-title-box">
            <h4 class="page-title" style="text-indent: 1em">菜单列表</h4>(蒋国林)
            <ol class="breadcrumb">
                <li>
                    <a href="${pageContext.request.contextPath}/index">首页</a>
                </li>
                <li>
                    <a href="${pageContext.request.contextPath}/permissions/admin">权限</a>
                </li>
                <li class="active">
                    菜单列表
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
        <%--        添加--%>
        <div class="container"
             style="margin-top: 20px;margin-bottom: 20px;  border:solid 1px rgba(0,0,0,0.2);padding: 20px;">
            <span style="color: #100E0EC8;font-size: 18px;"><i class="fa fa-file-text-o"></i> 数据列表</span>
            <a href="${pageContext.request.contextPath}/permissions/addMenu" class="btn btn-info" style="float: right">添加</a>
        </div>

        <%--        查询结果--%>
        <div style="padding: 0px;" class="container-fluid">
            <table class="table table-bordered table-hover" style="font-size: 15px">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>菜单名称</th>
                    <th>菜单级数</th>
                    <th>前端名称</th>
                    <th>前端图标</th>
                    <th>是否显示</th>
                    <th>排序</th>
                    <th>设置</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody style="text-align: center">
                <c:forEach items="${menuList}" var="m">
                    <tr>
                        <td>${m.id}</td>
                        <td>${m.title}</td>
                        <td><span>${m.level==0?"一级菜单":"二级菜单"}</span></td>
                        <td>${m.name}</td>
                        <td>
                            <i class="${"fa fa-".concat(m.icon)}" style="margin-top: 15%"></i>
                        </td>
                        <td>
                            <i class="fa fa-2x ${m.hidden==0? "fa-toggle-on":"fa-toggle-off" }"
                               style="margin-top: 15%;color: #519ff8"
                               onclick="updateHidden(${m.id},${m.hidden})"
                            ></i>
                    </td>
                    <td>${m.sort}</td>
                    <td><a href="${pageContext.request.contextPath}/permissions/menu?id=${m.id}" style="${m.level==0?"":"pointer-events:none"}">查看下级</a></td>
                    <td>
                        <a class="btn btn-primary" href="${pageContext.request.contextPath}/permissions/updateMenu/${m.id}">编辑</a>
                        <a class="btn btn-danger" onclick="deletes(${m.id})" class="deletes">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
            <nav aria-label="...">
                <ul class="pagination">
                    <span id="current" hidden>${pageInfo.page}</span>
                    <span id="currentLimit" hidden>${pageInfo.limit}</span>
                    <li class="page-item disabled" style="border-color:white">
                        <span class="page-link" href="${pageContext.request.contextPath}/#">共${pageInfo.count}条数据</span>
                    </li>
                    <li style="float: left" class="page-item">
                        <select id="select_limit" name="limit" class="selectC">
                            <option value="10" ${pageInfo.limit==10?"selected":""}><a href="">10条/页</a></option>
                            <option value="12" ${pageInfo.limit==12?"selected":""}>12条/页</option>
                            <option value="14" ${pageInfo.limit==14?"selected":""}>14条/页</option>
                            <option value="16" ${pageInfo.limit==16?"selected":""}>16条/页</option>
                        </select>
                    </li>
                    <li class="page-item ${pageInfo.page==1?"disabled":""}">
                        <a class="page-link" ${pageInfo.page==1?"href='#'":""}
                           href="${pageContext.request.contextPath}/permissions/menu?page=${pageInfo.page-1}&limit=${pageInfo.limit}&search=${param.search!=null?param.search:""}">上一页</a>
                    </li>
                    <li class="page-item ${pageInfo.page==1?"active":""}">
                        <a class="page-link"
                           href="${pageContext.request.contextPath}/permissions/menu?page=1&limit=${pageInfo.limit}&search=${param.search!=null?param.search:""}">1</a>
                    </li>

                    <c:if test="${pageInfo.page>2}">
                        <li class="page-item disabled">
                            <a class="page-link" href="${pageContext.request.contextPath}/">...</a>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.page>1&&pageInfo.page<pageInfo.cntpage}">
                        <li class="page-item ${(pageInfo.page>1&&pageInfo.page<pageInfo.cntpage)?"active":""}">
                            <span class="page-link">${pageInfo.page}</span>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.page<pageInfo.cntpage-1}">
                        <li class="page-item disabled ">
                            <a class="page-link" href="${pageContext.request.contextPath}/">...</a>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.cntpage>1}">
                        <li class="page-item ${pageInfo.page==pageInfo.cntpage?"active":""}">
                            <a id="cntpage" class="page-link "
                               href="${pageContext.request.contextPath}/permissions/menu?page=${pageInfo.cntpage}&limit=${pageInfo.limit}&search=${param.search!=null?param.search:""}">${pageInfo.cntpage}</a>
                        </li>
                    </c:if>
                    <li class="page-item ${pageInfo.page==pageInfo.cntpage?"disabled":""} ">
                        <a class="page-link" ${pageInfo.page==pageInfo.cntpage?"href='#'":""}
                           href="${pageContext.request.contextPath}/permissions/menu?page=${pageInfo.page+1}&limit=${pageInfo.limit}&search=${param.search!=null?param.search:""}">下一页</a>
                    </li>
                    <li class="page-item">
                        <span class="disabled"  onclick="toPage()">前往</span>
                        <input id="page" type="text" class="toPage" style="float:left;">
                        <span class="disabled">页</span>
                    </li>

                </ul>
            </nav>
    </div>



    </div>

    <jsp:include page="../inc/footer.jsp"/>
</div>
<script>

    function updateHidden(id,hidden) {
        if (hidden===1){
            hidden=0;
        }else {
            hidden=1;
        }
        location.href = "${pageContext.request.contextPath}/permissions/updateHidden/"+id+"/"+hidden;
    }

    function deletes(id) {
        layer.confirm('您确定删除吗?',{
            btn:['确定','取消'],
            title:'提示',
        },function () {
            location.href="${pageContext.request.contextPath}/permissions/deleteMenu/"+id;
        },function () {
            window.onload;
        });
    }


    $("#select_limit").bind("change", function () {
        let limit = $("#select_limit").find("option:selected").val();
        let page = $("#current").text();
        let tag = $("<a>")
        tag[0].href = "${pageContext.request.contextPath}/permissions/menu?page=1&limit=" + limit + "&search=" + $("#input1").val();
        tag[0].click();
    })
    $('#page').bind("keyup", function (obj) {
        let key = obj.originalEvent.keyCode
        let page = $("#page").val();
        let mpage = $("#cntpage").text();
        let limit = $("#currentLimit").text();
        if (key === 13) {
            if (!(page <= mpage && page > 0)) {
                alert("输入范围错误！！！")
            } else {
                let tag = $("<a>")
                tag[0].href = "${pageContext.request.contextPath}/permissions/menu?page=" + page + "&limit=" + limit;
                tag[0].click();
            }
        }
    })


    $("#input1").bind("keyup", function (obj) {
        let ct = $("#input1").val()
        let key = obj.originalEvent.keyCode
        let limit = $("#currentLimit").text();
        if (key === 13) {
            let tag = $("<a>")
            tag[0].href = "${pageContext.request.contextPath}/permissions/menu?page=1&limit=" + limit + "&search=" + ct;
            tag[0].click();
        }
    })

    function toPage() {
        let page = $("#page").val();
        if (page === null)
            return;
        let mpage = $("#cntpage").text();
        let limit = $("#currentLimit").text();
        if (!(page <= mpage && page > 0)) {
            alert("输入范围错误！！！")
        } else {
            let tag = $("<a>")
            tag[0].href = "${pageContext.request.contextPath}/permissions/menu?page=" + page + "&limit=" + limit;
            tag[0].click();
        }
    }

    function mysearch(obj) {
        let ct = $("#input1").val()
        let limit = $("#currentLimit").text();
        let tag = $("<a>")
        tag[0].href = "${pageContext.request.contextPath}/permissions/menu?page=1&limit=" + limit + "&search=" + ct;
        tag[0].click();
    }

</script>


<!--Begin core plugin -->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/moment/moment.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.slimscroll.js "></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
<!-- End core plugin -->

<!--Begin Page Level Plugin-->
<script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/raphael-min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/jquery-sparkline/jquery.charts-sparkline.js"></script>
<script src="${pageContext.request.contextPath}/assets/pages/dashboard.js"></script>
<script src="${pageContext.request.contextPath}/assets/layui/layui.js"></script>
<!--End Page Level Plugin-->


</body>
</html>
